<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script>
			//定义一个函数，用来解决绑定代码重复的问题
			/*
				参数：
					id 要绑定单击事件的按钮的id
					callback 事件的响应函数
			 */
			function myClick(id, callback){
				var btn = document.getElementById(id);
				btn.onclick = callback;
			}

			window.onload = function () {

				//为id为btn01的按钮绑定一个单击响应函数
				//获取按钮对象
				var btn01 = document.getElementById('btn01');
				// 为其绑定单击响应函数
				btn01.onclick = function () {
					// getElementById()用来根据id属性来获取一个元素
					// 查找#bj节点
					var bj = document.getElementById('bj');
					// innerHTML 可以用来查看和设置元素内部的html代码
					alert(bj.innerHTML);
				};

				// 为btn02绑定一个单击响应函数
				var btn02 = document.getElementById('btn02');
				btn02.onclick = function () {
					// 查找所有li节点
					// getElementsByTagName() 用于根据标签名来获取一组元素节点对象
					// 返回是一个类数组对象，所有符合条件的元素都会一起返回
					var lis = document.getElementsByTagName('li');
					// 遍历数组
					for(var i=0; i<lis.length; i++){
						alert(lis[i].innerHTML);
					}
				};

				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById('btn03');
				btn03.onclick = function () {
					// 查找name=gender的所有节点
					// getElementsByName() 根据元素的name属性来获取一组元素节点对象
					var inps = document.getElementsByName('gender');
					// 遍历inps
					for(var i=0; i<inps.length; i++){
						// 获取自结束标签的innerHTML，会返回空串
						// alert(inps[i].innerHTML);

						/*
							读取一个元素的属性：
								元素.属性名
								例子：
									name属性 元素.name
									value属性 元素.value
									id属性   元素.id
								特殊：
									class属性  元素.className

							修改属性：
								元素.属性名 = 属性值
						 */
						// alert(inps[i].className);
						alert(inps[i].value);
					}

				};


				//为btn04绑定一个单级响应函数
				var btn04 = document.getElementById('btn04');
				btn04.onclick = function () {

					// 获取id为city的节点
					var city = document.getElementById('city');
					// 查找#city下所有li节点
					var li = city.getElementsByTagName('li');
					// li = document.querySelectorAll('#city li');
					alert(li.length);
				};

				// 为btn05绑定一个单击响应函数
				var btn05 = document.getElementById('btn05');
				btn05.onclick = function () {
					// 获取id为city的元素
					var city = document.getElementById('city');
					// 返回#city的所有子节点
					// childNodes 是元素的属性，可以用来获取当前元素的所有子节点
					// childNodes会返回当前元素的所有子节点（包括元素和文本）
					// IE8以下的浏览器不会将空白的文本节点当成子节点
					var cns = city.childNodes;

					//遍历cns
					// for(var i=0; i<cns.length; i++){
					// 	alert(cns[i]);
					// }
					// alert(cns.length);

					/*
						children 是元素的属性，用来获取当前元素的子元素
					 */
					var cr = city.children;
					alert(cr.length);
				};

				// 为id为btn06的按钮绑定一个单击响应函数
				myClick('btn06', function () {
					// 获取id为phone的元素
					var phone = document.getElementById('phone');
					// 返回#phone的第一个子节点
					// firstChild用于获取元素的第一个子节点（包括空白的文本节点）
					// lastChild 用于获取当前元素的最后一个子节点
					// firstElementChild 用来获取当前元素的第一个子元素
					// lastElementChild 用来获取当前元素的最后一个子元素
					var fc = phone.firstChild;
					var fec = phone.firstElementChild;

					alert(fec);
				});


				myClick('btn07',function () {
					//获取id为北京元素
					var bj = document.getElementById('bj');
					// 返回#bj的父节点
					// parentNode 用来获取一个元素的父节点
					var pn = bj.parentNode;
					// innerText用来获取标签内部的文本内容，会自动去除html标签
					alert(pn.innerText);
				});

				myClick('btn08',function () {
					// 获取id为android的元素
					var and = document.getElementById('android');
					// 返回#android的前一个兄弟节点
					// previousSibling 用来获取当前元素的前一个兄弟节点
					// previousElementSibling 用来获取当前元素的前一个兄弟元素
					// nextSibling 获取当前元素的下一个兄弟节点
					// nextElementSibling 获取当前元素的下一个兄弟元素

					var prev = and.previousSibling;
					prev = and.previousElementSibling;
					// and.nextElementSibling
					alert(prev);
				});

				// 返回#username的value属性值
				myClick('btn09',function () {
					// 获取id为username的元素
					var um = document.getElementById('username');
					alert(um.value);
				});

				// 设置#username的value属性值
				myClick('btn10',function () {
					var um = document.getElementById('username');
					um.value = "老刘可真帅啊！";
				});

				// 返回#bj的文本值
				myClick('btn11',function () {
					// 获取id为bj的元素
					var bj = document.getElementById('bj');
					// alert(bj.innerHTML);
					// alert(bj.innerText);
					// bj.innerHTML = '深圳';

					// 获取bj的第一个子节点
					// var fc = bj.firstChild;
					// 文本节点的nodeValue，表示的是文本节点中的文字
					// alert(fc.nodeValue);
					alert(bj.firstChild.nodeValue);

				});

			};

		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone">
					<li>IOS</li>
					<li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="haha" type="radio" name="gender" value="male" >
				Male
				<input class="haha" type="radio" name="gender" value="female">
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde">
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>
